<template>
	<view class="container">
		<view class="form-rows f-a-center">
			<view class="rows-label">姓名：</view>
			<u--input v-model.trim="params.realname" clearable color="#5D6168" fontSize="34rpx" placeholder="请输入姓名"
				border="none" :customStyle="{paddingLeft:'30rpx'}"></u--input>
		</view>
		<view class="form-rows f-a-center">
			<view class="rows-label">手机号：</view>
			<u--input v-model.trim="params.mobile" type="number" clearable color="#5D6168" fontSize="34rpx"
				placeholder="请输入手机号" border="none" :customStyle="{paddingLeft:'30rpx'}"></u--input>
		</view>

		<view class="form-rows f-a-center">
			<view class="rows-label">验证码：</view>
			<u-input v-model.trim="params.code" placeholder="请输入验证码" clearable color="#5D6168" fontSize="34rpx" border="none"
				:customStyle="{paddingLeft:'30rpx'}">
				<template slot="suffix">
					<view class="code-text" :class="[params.mobile?'hasTime':'']" @tap="getPhoneCode">
						{{countdownTime>0?countdownTime+'S':'获取验证码'}}
					</view>
				</template>
			</u-input>
		</view>

		<view class="idcard-list">
			<view class="title">请上传正面照片</view>
			<image :src="params.image||'/static/mine/user-auth.png'" mode="widthFix" class="idcard-img"
				@click="uploadIdCard('image')">
			</image>
		</view>

		<view class="footer-fixed">
			<button class="btn-submit" @click="btnUserAuth">提交</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 倒计时秒数
				countdownTime: 0,
				intervalId: null,
				params: {
					realname: '',
					mobile: '',
					code: '',
					image: '',
				}
			}
		},
		onLoad() {},
		methods: {
			//上传图片
			uploadIdCard(type) {
				this.$util.fileUtil.chooseImageUpload().then(resList => {
					this.params[type] = resList[0].fullurl
				})
			},

			// 获取短信验证码
			getPhoneCode() {
				if (!this.params.mobile.trim()) {
					return
				}
				// 检查是否60秒内已经请求过
				if (this.countdownTime > 0) {
					return;
				}
				if (!this.$util.businessUtil.checkPhoneBool(this.params.mobile)) {
					return
				}
				this.$api.get_face_smsSend({
					mobile: this.params.mobile,
				}).then(res => {
					// 发送验证码
					uni.showToast({
						title: "验证码已发送",
						icon: "none",
						duration: 2000
					})
					// 倒计时60秒
					this.countdownTime = 60
					this.intervalId = setInterval(() => {
						if (this.countdownTime <= 0) {
							clearInterval(this.intervalId)
						}
						this.countdownTime -= 1;
					}, 1000)
				})
			},

			//用户认证
			btnUserAuth() {
				let {
					realname,
					mobile,
					image,
					code
				} = this.params
				if (!realname.trim()) {
					this.$showToast('请填写姓名')
					return
				}
				if (!mobile.trim()) {
					this.$showToast('请填写手机号')
					return
				}
				if (!code.trim()) {
					this.$showToast('请填写验证码')
					return
				}
				if (!image) {
					this.$showToast('请上传正面照片')
					return
				}
				this.$api.get_face_newFarmer({
					realname,
					mobile,
					image,
					code
				}).then(res => {
					this.$showToast('提交成功')
					setTimeout(() => {
						uni.navigateBack()
					}, 1000)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 20rpx 36rpx 200rpx;

		.form-rows {
			height: 106rpx;
			border-bottom: 1px solid #f1f1f1;

			.rows-label {
				width: 170rpx;
				font-weight: 400;
				font-size: 34rpx;
				color: #51565D;
			}

			.code-text {
				font-weight: 400;
				font-size: 32rpx;
				color: #FFFFFF;
				padding: 12rpx 28rpx;
				background-color: #FFC046;
				border-radius: 40rpx;
			}
		}
	}

	.idcard-list {
		.title {
			font-weight: 400;
			font-size: 32rpx;
			color: #51565D;
			padding: 30rpx 0 20rpx;
		}

		.idcard-img {
			width: 100%;
			// height: 442rpx;
			border-radius: 10rpx;
		}
	}

	.footer-fixed {
		padding: 16rpx 36rpx;
		background-color: #ffffff;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;

		.btn-submit {
			height: 76rpx;
			line-height: 76rpx;
			background: #FFC046;
			border-radius: 38rpx;
			font-weight: 400;
			font-size: 32rpx;
			color: #FFFFFF;
		}
	}
</style>